<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">


</head>
<body>
<!--上传图片表单-->
<form class="layui-form" id="addBookForm" enctype="multipart/form-data">
    <!--    // 图片上传-->
    <input id="rightupload" class="layui-btn layui-btn-radius layui-btn-normal" type="file" name="file" value=""/>
    <img id="usrightimg" src="" alt="" style="width: 75px;height: 80px">
    <br>
    <span style="color: red;font-size: 20px" id="message">请先上传图书封面</span>
    <br>
    <input value="上传图片" type="button" id="submit" class="layui-btn layui-btn-radius layui-btn-normal">
</form>



<!--添加书籍信息-->
<form class="layui-form" lay-filter="addBook-form" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">书籍名称：</label>
        <div class="layui-input-inline">
            <input type="text" id="input-name" name="bookName" required lay-verify="required" placeholder="请输入书籍名称"
                   autocomplete="off" class="layui-input">
        </div>
        <p class="message"></p>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">书籍价格：</label>
        <div class="layui-input-inline">
            <input type="number" name="bookPrice" required lay-verify="required" placeholder="请输入书籍价格"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上架时间：</label>
        <div class="layui-input-inline">
            <input type="date" name="bookDate" required lay-verify="required" placeholder="请选择上线时间" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否出版</label>
        <div class="layui-input-inline">
            <input type="radio" name="bookPutaway" value="是" title="是">
            <input type="radio" name="bookPutaway" value="否" title="否" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">书籍类型：</label>
        <div class="layui-input-inline">
            <input type="text" name="bookType" required lay-verify="required" placeholder="请输入书籍类型" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <!--隐藏的输入框用来装image的url-->
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" name="bookImage" id="bookImage">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">书籍作者：</label>
        <div class="layui-input-inline">
            <input type="text" name="bookAuthor" required lay-verify="required" placeholder="请输入书籍作者" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <!--富文本编辑器的内容-->
    <input name="bookIntroduce" type="hidden" id="bookIntroduce">

    <button type="submit" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="addBook" >添加</button>
</form>





<!--引入js-->
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
    </script>

    <script type="text/javascript" src="../utf8-jsp/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../utf8-jsp/ueditor.all.js"></script>

    <script type="text/javascript" src="../utf8-jsp/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>


    <script>

        var bookImageLock = true;/*防止重复提交定义上傳圖片锁*/
        var bookLock = true;/*防止重复提交定义添加书籍信息锁*/
        //加载富文本编辑器
        var ue = UE.getEditor('container');



        //上传图片后获取图片链接给book的iamge属性
        $("#submit").click(function () {
            if (!bookImageLock) {/* 2.判断该锁是否打开，如果是关闭的，则直接返回*/
                alert("图片已传中，请勿重复提交！");
                return false;
            }
            bookImageLock = false; /*3.进来后，立马把锁锁住*/
            $.ajax({
                type: "POST",
                url: "../uploadController/upload",
                data: new FormData($("#addBookForm")[0]),//序列化表单值
                async: false,
                contentType: false,//必须有
                processData: false,//必须有
                error: function (request) {
                    alert("请求出错！");
                },
                success: function (data) {
                    if (data.message=="上传成功！"){
                        //隐藏的图片链接input赋值
                        $("#bookImage").val(data.fileUrl);
                        //返回提示信息
                        $("#message").html(data.message);
                    }else{
                        //返回提示信息
                        $("#message").html(data.message);
                        bookImageLock = true;/*如果业务执行失败，修改锁状态*/
                    }

                },
                error:function () {
                    alert('图片上传失败！');
                    bookImageLock = true;/*如果业务执行失败，修改锁状态*/
                }
            });
        })

        //显示要上传的照片
        $('#rightupload').change(function () {
            var file = $('#rightupload').get(0).files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $('#usrightimg').get(0).src = e.target.result;
            }
        })

        //加载layui模块
        layui.use(['form', 'layer', 'table'], function () {
            var form = layui.form;
            var layer = layui.layer;
            // 监听修改表单的提交事件
            form.on('submit(addBook)', function (data) {
                if (!bookLock) {/* 2.判断该锁是否打开，如果是关闭的，则直接返回*/
                    alert("数据已添加，请勿重复提交！");
                    return false;
                }
                bookLock = false; /*3.进来后，立马把锁锁住*/
                //判断富文本编辑器中是否有内容
                if (!UE.getEditor('container').hasContents()){
                    alert('请在编辑器中先填写书籍简介!');
                }else{
                    //给表单中book的bookIntroduce赋值
                    $("#bookIntroduce").val(UE.getEditor('container').getContent());
                }

                // 获取表单元素中的值
                var data1 = form.val("addBook-form");
                 $.ajax({
                     type: "post",
                     url: "../Book/addBook",
                     data: data1,
                     dataType: "json",
                     contentType: "application/x-www-form-urlencoded; charset=utf-8",
                     success: function (data) {
                         console.log(data);
                         //关闭弹出层
                         if (data.msg=="添加失败！"){
                             bookLock = true;/*如果业务执行失败，修改锁状态*/
                         }
                         layer.msg(data.msg);
                     },
                     error:function () {
                         alert('添加数据失败！');
                         bookLock = true;/*如果业务执行失败，修改锁状态*/
                     }
                 });

                // 一定要写，否则会导致ajax失效
                return false;
            });
        })
    </script>
</body>
</html>